import style from "./index.module.css";
import timeAgo from "@/utils/timeAge";
import {
  EyeOutlined,
  LikeOutlined,
  CommentOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { Avatar } from "antd";

export default function PostCard({ post, onClick }: any) {
  // 截取纯文本内容并限制长度
  const plainContent = post.content.replace(/<[^>]+>/g, "");
  const previewContent =
    plainContent.length > 120
      ? `${plainContent.slice(0, 120)}...`
      : plainContent;

  return (
    <div className={style.container} onClick={onClick}>
      {/* 作者信息 */}
      <div className={style.authorSection}>
        <Avatar
          className={style.avatar}
          src={post?.avatar}
          icon={<UserOutlined />}
          onError={() => {
            return true;
          }}
        />
        <div className={style.authorInfo}>
          <p className={style.username}>{post.username}</p>
          <span className={style.postTime}>{timeAgo(post.createTime)}</span>
        </div>
      </div>

      {/* 帖子内容 */}
      <div className={style.contentSection}>
        <h2 className={style.title}>{post.title}</h2>
        <p className={style.content}>{previewContent}</p>

        {/* 标签（如果有） */}
        {post.tags?.length > 0 && (
          <div className={style.tags}>
            {post.tags.slice(0, 3).map((tag: string) => (
              <span key={tag} className={style.tag}>
                #{tag}
              </span>
            ))}
          </div>
        )}
      </div>

      {/* 互动统计 */}
      <div className={style.stats}>
        <div className={style.statItem}>
          <EyeOutlined className={style.statIcon} />
          <span>{post.viewCount || 0}</span>
        </div>
        <div className={style.statItem}>
          <LikeOutlined className={style.statIcon} />
          <span>{post.likeCount || 0}</span>
        </div>
        <div className={style.statItem}>
          <CommentOutlined className={style.statIcon} />
          <span>{post.commentCount || 0}</span>
        </div>
      </div>
    </div>
  );
}
